import { Color, Matrix4 } from 'https://unpkg.com/three/build/three.module.js';
import { initShaders } from '../jsm/Utils.js';
import lib from '../jsm/ThreeLib.js';
import Poly from '../jsm/Poly.js'
import Sky from '../jsm/Sky.js'
import ShapeGeo from '../jsm/ShapeGeo.js';

window.onload = function () {

    const backColor = new Color("rgba(0,0,0,1)");

    const canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const gl = canvas.getContext("webgl");
    //开启颜色合成,才会有透明度的感觉
    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

    //初始化着色器
    initShaders(gl,
        document.querySelector("#vertexShader").innerText,
        document.querySelector("#fragmentShader").innerText);
    lib.clearCanvas(gl, new Color("rgba(0,0,0,1)"), 1);


    let u_m4 = gl.getUniformLocation(gl.program, 'u_m4');

    let poly = new Poly({
        gl: gl,
        vertices: [
            -0.2, 0,
            0.2, 0,
            0.0, 0.3,
        ]
    })

    const m4 = new Matrix4();


    let angle = 0;
    // S();


    !(function ani() {
        angle += 0.01;

        m4.makeRotationZ(angle);
        gl.uniformMatrix4fv(u_m4, false, m4.elements);
        poly.draw(["TRIANGLES"]);

        requestAnimationFrame(ani);
    })();



    //缩放矩阵
    function S() {
        let x = 2.0;
        let y = 2.0;
        let z = 2.0;
        let u_matrix = [
            x, 0.0, 0.0, 0.0,
            0.0, y, 0.0, 0.0,
            0.0, 0.0, z, 0.0,
            0.0, 0.0, 0.0, 1.0,
        ];
        gl.uniformMatrix4fv(u_m4, false, u_matrix);
    }

    //位移矩阵
    function P() {
        let x = 0.2;
        let y = 0.2;
        let z = 0.2;
        let u_matrix = [
            1.0, 0.0, 0.0, x,
            0.0, 1.0, 0.0, y,
            0.0, 0.0, 1.0, z,
            0.0, 0.0, 0.0, 1.0,
        ];
        gl.uniformMatrix4fv(u_m4, false, u_matrix);
    }


    //旋转矩阵
    function R() {
        let angle = 0.1;
        let u_cos = Math.cos(angle);
        let u_sin = Math.sin(angle);
        let u_matrix = [
            u_cos, u_sin, 0.0, 0.0,
            -u_sin, u_cos, 0.0, 0.0,
            0.0, 0.0, 1.0, 0.0,
            0.0, 0.0, 0.0, 1.0,
        ];
        gl.uniformMatrix4fv(u_m4, false, u_matrix);
    }
}